<template>
  <div class="content">
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column width="180" prop="OverseasCourierNumber" label="快递单号" align="center"></el-table-column>
        <el-table-column width="120" prop="ArticleContent" label="商品内容" align="center"></el-table-column>
        <el-table-column width="120" prop="vipid" label="vipid" align="center"></el-table-column>
        <el-table-column width="120" prop="reason" label="理由/原因" align="center"></el-table-column>
        <el-table-column width="120" prop="baoguoWeights" label="重量" align="center"></el-table-column>
        <el-table-column width="120" prop="recipient" label="接收者" align="center"></el-table-column>
        <el-table-column width="220" prop="address" label="地址" align="center"></el-table-column>
        <el-table-column width="120" prop="mobile" label="电话" align="center"></el-table-column>
        <el-table-column width="120" prop="zipCode" label="邮政编码" align="center"></el-table-column>
        <el-table-column width="120" prop="pic_postOffice" label="邮局证明图片" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pic_postOffice" @click="lookImg(scope.row.pic_postOffice)" type="text" size="small">查看</el-button>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column width="120" prop="pic_zwxx" label="注文详细图片" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pic_zwxx" @click="lookImg(scope.row.pic_zwxx)" type="text" size="small">查看</el-button>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column width="120" prop="pic_posun" label="破损图片" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pic_posun" @click="lookImg(scope.row.pic_posun, true)" type="text" size="small">查看</el-button>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
        <el-table-column width="250" prop="goodsDetail" label="商品明细" align="center">
          <template slot-scope="scope">
            <el-button @click="handleTable(scope.row)" type="text" size="small">查看明细</el-button>
          </template>
        </el-table-column>
        <el-table-column width="120" prop="status" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" v-if="$_permissions()=='2'||$_permissions()=='3'" width="150" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row, true)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row, false)" v-if="$_permissions()=='3'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.start"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pagination.nums"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    ></el-pagination>
    <el-dialog title="编辑" :visible.sync="show" width="35%" @close="handleClose">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="快递单号" prop="OverseasCourierNumber"><el-input v-model="ruleForm.OverseasCourierNumber"></el-input></el-form-item>
          <el-form-item label="商品内容" prop="ArticleContent"><el-input v-model="ruleForm.ArticleContent"></el-input></el-form-item>
          <el-form-item label="理由/原因" prop="reason"><el-input type="textarea" v-model="ruleForm.reason"></el-input></el-form-item>
          <el-form-item label="重量" prop="baoguoWeights"><el-input v-model="ruleForm.baoguoWeights"></el-input></el-form-item>
          <el-form-item label="接收者" prop="recipient"><el-input v-model="ruleForm.recipient"></el-input></el-form-item>
          <el-form-item label="地址" prop="address"><el-input v-model="ruleForm.address"></el-input></el-form-item>
          <el-form-item label="电话" prop="mobile"><el-input v-model="ruleForm.mobile"></el-input></el-form-item>
          <el-form-item label="邮政编码" prop="zipCode"><el-input v-model="ruleForm.zipCode"></el-input></el-form-item>
          <el-form-item label="邮局证明图片" prop="pic_postOffice">
            <el-upload
              :limit="1"
              :action="uploadUrl"
              list-type="picture-card"
              :file-list="fileList"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="imgupload"
              name="pic"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="注文详细图片" prop="pic_zwxx">
            <el-upload
              :limit="1"
              :action="uploadUrl"
              list-type="picture-card"
              :file-list="fileList2"
              :on-preview="handlePictureCardPreview2"
              :on-remove="handleRemove2"
              :on-success="imgupload2"
              name="pic"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="破损图片" prop="pic_posun">
            <el-upload
              :limit="6"
              :action="uploadUrl"
              list-type="picture-card"
              :file-list="fileList3"
              :on-preview="handlePictureCardPreview3"
              :on-remove="handleRemove3"
              :on-success="imgupload3"
              name="pic"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="商品明细" prop="goodsDetail"><el-input v-model="ruleForm.goodsDetail"></el-input></el-form-item> -->
          <el-form-item label="状态" prop="status">
            <el-select v-model="ruleForm.status">
              <el-option label="已调查" value="已调查"></el-option>
              <el-option label="待调查" value="待调查"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item><el-button type="primary" @click="submitForm">保存</el-button></el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog title="商品明细" :visible.sync="showTable" width="50%">
      <el-table :data="table_mx" border style="width: 100%">
        <el-table-column prop="name" label="快递单号" align="center"></el-table-column>
        <el-table-column prop="num" label="数量" align="center"></el-table-column>
        <el-table-column prop="weight" label="重量" align="center"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="预览" :visible.sync="dialogVisible" width="40%">
      <el-image style="width: 100%" :src="dialogImageUrl" :preview-src-list="[dialogImageUrl]"></el-image>
    </el-dialog>
    <el-dialog title="预览" :visible.sync="showImgs" width="40%">
      <el-image v-for="(item, index) in imgSrcs" style="width: 100%;display: block;margin-bottom: 20px;" :src="item" :preview-src-list="imgSrcs"></el-image>
    </el-dialog>
    <el-dialog title="预览" :visible.sync="showImg" width="40%"><el-image style="width: 100%" :src="imgSrc" :preview-src-list="[imgSrc]"></el-image></el-dialog>
  </div>
</template>

<script>
import { showALLlpdc, delbaoguolpdc, updatebaoguolpdc, uploadUrl } from '@/api/test.js';
import pagination from '@/mixins/page.js';
export default {
  name: 'hongcaitj',
  mixins: [pagination],
  data() {
    return {
      tableData: [],
      table_mx: [],
      uploadUrl: uploadUrl,
      show: false,
      fileList: [],
      fileList2: [],
      fileList3: [],
      showImg: false,
      showImgs: false,
      disabled: false,
      showTable: false,
      ruleForm: {},
      rules: {
        KDnumber: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
        ServiceFee: [{ required: true, message: '请输入服务费', trigger: 'blur' }],
        status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
      },
      imgSrc: '',
      imgSrcs: [],
      dialogImageUrl: '',
      dialogVisible: false
    };
  },
  methods: {
    handleTable(row) {
      //打开弹出的表格
      this.table_mx = row.goodsDetail.split('|').map(item => {
        let data = item.split('#');
        return {
          name: data[0],
          num: data[1],
          weight: data[2]
        };
      });
      this.showTable = true;
    },
    imgupload(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.status == 'ok') {
        this.ruleForm.pic_postOffice = response.src;
      } else {
        this.$message.error('上传失败');
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.pic_postOffice = '';
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgupload2(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.status == 'ok') {
        this.ruleForm.pic_zwxx = response.src;
      } else {
        this.$message.error('上传失败');
      }
    },
    handleRemove2(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.pic_zwxx = '';
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    imgupload3(response, file, fileList) {
      console.log(response, file, fileList);
      if (response.status == 'ok') {
        this.ruleForm.pic_posun = fileList.map(item => {
          if(item.response){
            return item.response.src
          }else{
            return item.url
          }
        }).join('|');
      } else {
        this.$message.error('上传失败');
      }
    },
    handleRemove3(file, fileList) {
      console.log(file, fileList);
      this.ruleForm.pic_posun = fileList.map(item => {
        if(item.response){
          return item.response.src
        }else{
          return item.url
        }
      }).join('|');
    },
    handlePictureCardPreview3(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    lookImg(src, status) {
      if (status) {
        this.imgSrcs = src.split('|');
        this.showImgs = true;
      } else {
        this.imgSrc = src;
        this.showImg = true;
      }
    },
    handleClick(row, status) {
      //status true:编辑 false:删除
      if (status) {
        //编辑
        this.ruleForm = { ...row };
        if (row.pic_postOffice) {
          this.fileList = [
            {
              url: row.pic_postOffice
            }
          ];
        }
        if (row.pic_zwxx) {
          this.fileList2 = [
            {
              url: row.pic_zwxx
            }
          ];
        }
        if (row.pic_posun) {
          this.fileList3 = row.pic_posun.split('|').map(item => {
            return {
              url: item
            };
          });
        }
        this.show = true;
      } else {
        //删除
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delbaoguolpdc({ id: row.id }).then(res => {
              console.log(res);
              if (res.msg.indexOf('成功') != -1) {
                this.$message.success('删除成功');
                this.getList();
              } else {
                this.$message.error('删除失败');
              }
            });
          })
          .catch(() => {});
      }
    },
    getList() {
      //获取列表
      showALLlpdc(this.pagination).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.pagination.total = res.total;
      });
    },
    submitForm() {
      //提交请求
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.ruleForm.id) {
            //更新
            updatebaoguolpdc({
              ...this.ruleForm,
              ...{
                notes: this.ruleForm.added
              }
            }).then(res => {
              if (res.msg.indexOf('成功') != -1) {
                this.$message.success(res.msg);
                this.handleClose();
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        }
      });
    },
    handleClose() {
      //弹窗关闭回调 -- 清空表单数据
      this.ruleForm = {};
      this.show = false;
      this.$refs['ruleForm'].resetFields();
      this.fileList = [];
    }
  },
  mounted() {
    this.getList();
  }
};
</script>

<style lang="scss" scoped>
.content {
}
</style>
